<script setup>
import MovieCommon from "../components/movieDetail/MovieCommon.vue";
import MovieNews from "../components/movieDetail/MovieNewsComponents.vue";
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue';
import { getMovieDetail } from "../api/api";
import { wantStore } from '../stores/want'

const route = useRoute()
const mid = ref(route.params.id)
const requestSuccess = ref(false)
const showIntroduction = ref(false)
const wantBtn = ref(false)
const movieList = ref("")
const activeNav = ref(0)
const wantPinias = wantStore()

const getMovieDetailApi = async (ids = mid.value) => {
    let data = await getMovieDetail(ids)
    movieList.value = data
    requestSuccess.value = true
}

const changeShowIntroduction = () => {
    showIntroduction.value = !showIntroduction.value
}

const addWantList = () => {
    wantBtn.value = true
    let wantItem = {
        id: mid.value,
        nm: movieList.value?.movie?.nm,
        img: movieList.value?.movie?.img,
        wantNum: movieList.value?.realtime?.wish,
        actor: movieList.value?.movie?.star,
        date: movieList.value?.movie?.onlineDate,
        address: "",
        type: 0, // 0为电影，1为演出
    }
    wantPinias.addWantList(wantItem)
}

const haveWant = () => {
    let myWantList = JSON.parse(localStorage.my_want || '[]')
    if(myWantList.userWantList){
        let isWant = myWantList.userWantList.filter(k => k.id == mid.value)[0]
        if(isWant){
            wantBtn.value = true
        }
    }
    
}

onMounted(() => {
    getMovieDetailApi()
    haveWant()
})
</script>

<template>
    <div class="movie-detail-view" :style="`backgroundColor: ${movieList?.movie?.backgroundColor}; `">
        <!-- 请求未完成时 -->
        <div class="requesting" v-if="!requestSuccess">
            <img src="../assets/imgs/play/loading.gif" alt="">
            <div>数据请求中</div>
        </div>

        <div v-if="requestSuccess">

        <div class="movie-detail-warpper">
            <div class="movie-detail-top">
                <img src="../assets/imgs/movie/a63.png" @click="$router.go(-1)">
                电影 > {{ movieList?.movie?.nm }}
            </div>
            <div class="movie-detail">
                <div class="movie-detail-Bimg">
                    <img class="movie-detail-img" :src="movieList?.movie?.img">
                    <img class="p-img" src="../assets/imgs/movie/0.png">
                </div>
                <div class="m-con">
                    <div class="m-name">{{ movieList?.movie?.nm }}</div>
                    <div class="m-enm grey">{{ movieList?.movie?.enm }}</div>
                    <div class="grey">{{ movieList?.movie?.cat.replaceAll(","," / ") }}</div>
                    <div class="grey">{{ movieList?.movie?.star.replaceAll(","," / ") }}</div>
                    <div class="grey">{{ movieList?.movie?.onlineDate }}/{{ movieList?.movie?.dur }}分钟</div>
                    <div class="btn-list">
                        <div class="btn-item" @click="addWantList">
                            <img src="../assets/imgs/movie/watch.png" v-show="!wantBtn">
                            {{wantBtn?"已想看":"想看"}}
                        </div>
                        <div class="btn-item">
                            <img src="../assets/imgs/movie/2.png">
                            看过
                        </div>
                    </div>
                </div>
            </div>

            <div class="movie-score">
                <div class="movie-score-title">
                    <div>评分</div>
                    <div class="title-span"> 
                        {{ movieList?.realtime?.wish }}人想看 &nbsp;&nbsp; {{ movieList?.realtime?.watched }}人看过
                        <img src="../assets/imgs/movie/arrow-right.png">
                    </div>
                </div>
                <div class="movie-score-con">
                    <div class="big-score-box">
                        <div class="big-score">{{ movieList?.movie?.sc }}</div>
                        <div>{{ movieList?.realtime?.snum }}人评</div>
                    </div>
                    <div class="score-detail" v-if="movieList?.distribution">
                        <div class="score-detail-item" v-for="(s,index) in movieList?.distribution" :key="index">
                            <div class="star-img-box">
                                <div class="star-img" :class="{active: index > 0}"></div>
                                <div class="star-img" :class="{active: index > 1}"></div>
                                <div class="star-img" :class="{active: index > 2}"></div>
                                <div class="star-img" :class="{active: index > 3}"></div>
                                <div class="star-img"></div>
                            </div>
                            <div class="score-bar">
                                <div class="score-bar-con" :style="`left:${s.percent * 100}%`"></div>
                            </div>
                        </div>
                    </div>
                    <div class="score-rank" v-if="movieList?.reputation?.movieRank">
                        <div class="movieRank">
                            <div>TOP</div>
                            <div class="movieRank-num">{{ movieList?.reputation?.movieRank }}</div>
                        </div>
                        <div class="rank-con-box">
                            <div class="rank-date">{{ movieList?.reputation?.firstWord }}</div>
                            <div class="rank-con">{{ movieList?.reputation?.secondWord }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="eggs" v-show="movieList?.tips?.tips[0]?.content">
                <img :src="movieList?.tips?.tips[0]?.tipImg" >
                <div>{{ movieList?.tips?.tips[0]?.content }}</div>
            </div>

            <div class="introduction">
                <div class="introduction-title">
                    <div>简介</div>
                    <div class="introduction-title-span">
                        {{showIntroduction?'收起':'展开'}}
                        <img :class="{active: showIntroduction }" src="../assets/imgs/movie/arrow-right.png" @click="changeShowIntroduction">
                    </div>
                </div>
                <div class="introduction-con" :class="{active: !showIntroduction }">
                    {{ movieList?.movie?.dra }}
                </div>
            </div>

            <div class="detail-title">
                <div>演职人员</div>
                <div class="detail-title-span">
                    全部
                    <img src="../assets/imgs/movie/arrow-right.png">
                </div>
            </div>
            <div class="actor-warrper">
                <div class="actor-list">
                    <div class="actor-item" v-for="c in movieList?.celebrities">
                        <img :src="c.avatar" alt="">
                        <div>{{ c.cnm }}</div>
                        <div style="color: #b9a7a6;font-size: 12px;">{{ c.desc }}</div>
                    </div>
                </div>
            </div>

            <div class="detail-title">
                <div>视频推荐</div>
                <div class="detail-title-span">
                    全部
                    <img src="../assets/imgs/movie/arrow-right.png">
                </div>
            </div>
            <div class="video-warpper">
                <div class="video-list">
                    <div class="video-item" v-for="v in movieList?.feedVideos?.feeds">
                        <img :src="v.video.imgUrl">
                        <!-- <video :src="v.video.url" :poster="v.video.imgUrl"></video> -->
                        <div class="paly-btn"><div class="triangle"></div></div>
                    </div>
                </div>
            </div>

            <div class="detail-title">
                <div>剧照</div>
                <div class="detail-title-span">
                    全部{{ movieList?.movie?.photos.length }}张
                    <img src="../assets/imgs/movie/arrow-right.png">
                </div>
            </div>
            <div class="photo-warpper">
                <div class="photo-list">
                    <div class="photo-item" v-for="p in movieList?.movie?.photos">
                        <img :src="p">
                    </div>
                </div>
            </div>
        </div>

        <div class="other-content">
            <van-tabs v-model:active="activeNav" scrollspy sticky color="#f83a3c">
                <van-tab title="影评">
                    <div class="det-title">观众热评</div>
                    <MovieCommon v-for="c in  movieList?.comments?.hotComments" :c="c"/>
                    <div class="more">查看全部{{ movieList?.comments?.total }}条短评</div>
                    <div class="grey-line"></div>

                    <div class="det-title">影片问答</div>
                    <div class="det-questions" v-for="q in movieList?.questions?.questions">
                        <div class="questions-title">{{ q.question?.content }}</div>
                        <div>{{ q.question?.answerCnt }}个回答</div>
                        <div class="questions-answer">{{ q.answer?.content }}</div>
                    </div>
                    <div class="more">查看全部{{ movieList?.questions?.total }}个问答</div>
                    <div class="grey-line"></div>
                </van-tab>
                <van-tab title="热议">
                    <div class="det-title">热议话题</div>
                    <div class="grey-line"></div>
                </van-tab>
                <van-tab title="详细信息">
                    <div class="det-title">影片资料</div>
                    <div class="features-list">
                        <div class="features-item" v-for="f in movieList?.features">
                            <img :src="f.img">
                            <div class="features-item-con">
                                <div>{{ f.title }}</div>
                                <div class="features-item-desc">{{ f.content }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="grey-line"></div>

                    <div class="det-title">票房</div>
                    <div class="m-box">
                        <div class="m-box-item">
                            {{ movieList?.mbox?.mbox?.lastDayRank }}
                            <div class="m-box-desc">昨日票房排行榜</div>
                        </div>
                        <div class="m-box-item">
                            {{ movieList?.mbox?.mbox?.firstWeekBox }}
                            <div class="m-box-desc">首周票房(万)</div>
                        </div>
                        <div class="m-box-item">
                            {{ movieList?.mbox?.mbox?.sumBox }}
                            <div class="m-box-desc">累计票房(万)</div>
                        </div>
                    </div>
                    <div class="grey-line"></div>

                    <div class="det-title">相关快讯</div>
                    <div class="news-item-wapper">
                        <MovieNews v-for="n in movieList?.newsList?.newsList" :nList="n" />
                    </div>
                    <div class="more">查看全部{{ movieList?.newsList?.paging?.total }}条快讯</div>
                    <div class="grey-line"></div>
                </van-tab>
                <van-tab title="推荐">
                    <div class="det-title">喜欢这部影片的人也喜欢</div>
                    <div class="related-wrapper">
                        <div class="related-movies-list">
                            <div class="related-movies-item" v-for="r in movieList?.relatedMovies">
                                <div class="related-img">
                                    <img :src="r.img">
                                    <div class="mask"></div>
                                    <div class="related-score">{{ r.sc? "评分"+r.sc : "暂无评分" }}</div>
                                </div>
                                <div class="related-nm">{{ r.nm? r.nm : r.title }}</div>
                            </div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>

            <div class="statement">
                影视行业信息<span>《免责声明》</span>I 违法和不良信息举报电话：400601890
            </div>
        </div>
        <!-- <div class="bot"></div> -->

        <!-- <div class="buy-btn-box">
            <div class="buy-btn">{{ movieList?.movie?.minPriceContent }} 特惠购票</div>
        </div> -->
        </div>
    </div>
</template>

<style lang="scss" scoped>
.movie-detail-view{
    width: 100vw;
    
    .requesting{
        text-align: center;
        padding: 20vw 0;

        img{
            width: 20vw;
        }
    }
    
    .movie-detail-warpper{
        padding: 0 4vw;
        box-sizing: border-box;

        .movie-detail-top{
            color: #cccccc;
            font-size: 14px;
            line-height: 10vw;
            display: flex;
            align-items: center;

            img{
                width: 2vw;
                margin-right: 2vw;
            }
        }

        .movie-detail{
            color: #ffffff;
            display: flex;
            margin-top: 4vw;

            .movie-detail-Bimg{
                width: 28vw;
                height: 40vw;
                border-radius: 1.5vw;
                overflow: hidden;
                position: relative;

                .movie-detail-img{
                    width: 28vw;
                    height: 40vw;
                    border-radius: 1.5vw;
                }
                .p-img{
                    width: 10vw;
                    height: 10vw;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                }
            }
            
            .m-con{
                width: 58vw;
                margin-left: 4vw;

                div{
                    width: 58vw;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }

                .m-name{
                    height: 6vw;
                    line-height: 6vw;
                    font-size: 20px;
                    font-weight: bold;
                    margin-top: 1vw;
                }

                .grey{
                    color: #b9a7a6;
                    font-size: 12px;
                    height: 5vw;
                    line-height: 5vw;
                }
                .m-enm{
                    margin-top: 4vw;
                }

                .btn-list{
                    display: flex;
                    justify-content: space-between;
                    margin-top: 1vw;

                    .btn-item{
                        font-size: 15px;
                        width: 28vw;
                        height: 8.5vw;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: #8d706e;
                        border-radius: 1vw;

                        img{
                            width: 3.5vw;
                            margin-right: 2vw;
                        }
                    }
                }
            }
        }
        
        .movie-score{
            width: 100%;
            height: 25vw;
            padding: 4vw 0;
            box-sizing: border-box;
            margin: 4vw 0 2vw 0;
            background-color: rgba(0,0,0,0.2);
            border-radius: 2vw;

            .movie-score-title{
                width: 100%;
                padding: 0 4vw;
                box-sizing: border-box;
                color: #ffffff;
                font-size: 14px;
                display: flex;
                justify-content: space-between;
                margin-bottom: 2vw;

                .title-span{
                    font-size: 12px;
                    color: #b9a7a6;

                    img{
                        width: 1vw;
                    }
                }
            }
            .movie-score-con{
                display: flex;
                align-items: center;
                padding-right: 4vw;
                justify-content: space-around;

                .big-score-box{
                    color: hsla(0,0%,100%,.4);
                    font-size: 12px;
                    width: 20vw;
                    text-align: right;
                    // background-color: pink;

                    .big-score{
                        color: #ffb400;
                        font-size: 7vw;
                        font-weight: 600;
                        font-family: MaoYanHeiTi-H-H;
                        line-height: 8vw;
                    }
                }
                .score-detail{
                    width: 28vw;
                    height: 12vw;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-between;
                    
                    .score-detail-item{
                        width: 28vw;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .star-img-box{
                            width: 10vw;
                            height: 2vw;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            overflow: hidden;

                            .star-img{
                                width: 1.3vw;
                                height: 1.3vw;
                                background: url(../assets/imgs/movie/white-star.png) no-repeat;
                                background-size: contain;
                                
                                &.active{
                                    width: 1.3vw;
                                    height: 1.3vw;
                                    background: url(../assets/imgs/movie/grey-star.png) no-repeat;
                                    background-size: contain;
                                    margin-right: 0.8vw;
                                }
                            }
                        }
                        .score-bar{
                            width: 17vw;
                            height: 1.2vw;
                            background-color: hsla(0,0%,100%,.06);
                            position: relative;
                            overflow: hidden;

                            .score-bar-con{
                                position: absolute;
                                top: 0;
                                left: 0vw;
                                width: 20vw;
                                height: 1.6vw;
                                transform: translateX(-20vw);
                                background: hsla(0,0%,100%,.3);
                            }
                        }
                    }
                }
                .score-rank{
                    width: 35vw;
                    height: 12vw;
                    padding: 1vw;
                    box-sizing: border-box;
                    border: 1px solid #b49c70;
                    border-radius: 1.5vw;
                    display: flex;
                    align-items: center;

                    .movieRank{
                        color: rgba(255,229,150,.7);
                        font-size: 12px;
                        text-align: center;
                        width: 8vw;
                        height: 10vw;
                        padding-top: 1vw;
                        box-sizing: border-box;
                        border-radius: 1.5vw;
                        background-color: #663b27;
                        margin-right: 1vw;
                        
                        .movieRank-num{
                            color: #ffd15f;
                            font-size: 5vw;
                            line-height: 6vw;
                        }
                    }

                    .rank-con-box{
                        font-size: 3vw;
                        line-height: 4vw;

                        .rank-date{
                            color: #ffeec1;
                            opacity: .7;
                        }
                        .rank-con{
                            color: #fff4bd;
                        }
                    }
                }
            }
        }

        .eggs{
            color: #ffffff;
            font-size: 14px;
            line-height: 10vw;
            display: flex;
            align-items: center;

            img{
                width: auto;
                height: 4vw;
                margin-right: 2vw;
            }
        }

        .introduction{
            color: #ffffff;
            margin-top: 5vw;
            
            .introduction-title{
                display: flex;
                justify-content: space-between;

                .introduction-title-span{
                    font-size: 13px;
                    color: #b9a7a6;

                    img{
                        width: 1vw;
                        transform: rotate(90deg);
                        
                        &.active{
                            transform: rotate(-90deg);
                        }
                    }
                }
            }
            
            .introduction-con{
                width: 100%;
                line-height: 7vw;
                font-size: 15px;
                margin-top: 4vw;

                &.active{
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                }
            }
        }

        .detail-title{
            width: 100%;
            height: 8vw;
            color: #ffffff;
            display: flex;
            justify-content: space-between;
            margin-top: 7vw;

            .detail-title-span{
                font-size: 13px;
                color: #b9a7a6;

                img{
                    width: 1vw;
                }
            }
        }

        .actor-warrper{
            width: 100%;
            height: 45vw;
            overflow: hidden;

            .actor-list{
                width: 100%;
                height: 55vw;
                color: #ffffff;
                font-size: 14px;
                text-align: center;
                line-height: 5vw;
                display: flex;
                overflow-x: auto;

                .actor-item{
                    width: 21.5vw;
                    margin-right: 2vw;
                    
                    div{
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    
                    img{
                        width: 21.5vw;
                    }
                }
            }
        }

        .video-warpper{
            width: 100%;
            height: 26vw;
            overflow: hidden;

            .video-list{
                width: 100%;
                height: 28vw;
                display: flex;
                overflow-x: auto;

                .video-item{
                    min-width: 42.5vw;
                    height: 24vw;
                    margin-right: 2vw;
                    position: relative;
                    background-color: rgba(0,0,0,.8);
                    border-radius: 1vw;
                    overflow: hidden;

                    img{
                        width: 42.5vw;
                        height: 24vw;
                    }
                    .paly-btn{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-5vw,-5vw);
                        box-sizing: border-box;
                        width: 10vw;
                        height: 10vw;
                        background: hsla(0,0%,100%,.9);
                        box-shadow: 0 0 0.04rem 0 rgba(0,0,0,.3);
                        border-radius: 50%;
                    
                        .triangle{
                            position: absolute;
                            width: 0;
                            height: 0;
                            border-color: transparent transparent transparent #222;
                            border-style: solid;
                            border-width: 2.6vw 4vw;
                            top: 50%;
                            left: 50%;
                            transform: translate(-1.3vw,-2.5vw);
                        }
                    }
                }
            }
        }
        
        .photo-warpper{
            width: 100%;
            height: 26vw;
            overflow: hidden;

            .photo-list{
                width: 100%;
                height: 28vw;
                display: flex;
                overflow-x: auto;

                .photo-item{
                    min-width: 40vw;
                    height: 24vw;
                    overflow: hidden;
                    margin-right: 2vw;

                    img{
                        width: 40vw;
                    }
                }
            }
        }
    }

    .other-content{
        width: 100vw;
        padding-top: 3vw;
        margin-top: 4vw;
        background-color: #ffffff;
        border-radius: 4vw 4vw 0 0;

        .det-title{
            width: 100vw;
            padding: 0 4vw;
            box-sizing: border-box;
            color: #333333;
            font-weight: bold;
            line-height: 12vw;
        }

        .det-questions{
            color: #999;
            font-size: 12px;
            width: 92vw;
            margin: 0 auto;
            line-height: 6vw;
            padding-bottom: 2vw;
            margin-bottom: 2vw;
            border-bottom: #ececec 1.5px dashed;

            .questions-title{
                color: #222;
                font-size: 16px;
            }

            .questions-answer{
                width: 100%;
                margin-top: 2vw;
            }
        }

        .features-list{
            width: 100vw;
            padding: 0 4vw;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 4vw 0;

            .features-item{
                width: 45vw;
                display: flex;
                justify-content: space-between;

                img{
                    width: 5vw;
                    height: 5vw;
                    margin-top: 1vw;
                }
                .features-item-con{
                    width: 38vw;
                    line-height: 6vw;
                    letter-spacing: 2px;
                    
                    .features-item-desc{
                        color: #666;
                        font-size: 14px;
                        width: 100%;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
            }
        }

        .m-box{
            text-align: center;
            width: 92vw;
            height: 20vw;
            padding: 0 4vw;
            margin: 0 auto;
            margin-bottom: 4vw;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #f6f6f6;
            border-radius: 2vw;
            
            .m-box-item{
                color: #cf494c;
                font-size: 5vw;
                width: 30%;
                line-height: 7vw;

                .m-box-desc{
                    color: #999;
                    font-size: 12px;
                }
            }
        }

        .related-wrapper{
            width: 100vw;
            height: 42vw;
            padding: 0 4vw;
            box-sizing: border-box;
            overflow: hidden;

            .related-movies-list{
                font-size: 13px;
                width: 100%;
                height: 50vw;
                overflow-x: auto;
                display: flex;
                
                .related-movies-item{
                    min-width: 25vw;
                    margin-right: 1.5vw;
                    
                    .related-img{
                        width: 25vw;
                        height: 34vw;
                        position: relative;

                        img{
                            width: 100%;
                            height: 100%;
                        }
                        
                        .mask{
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            width: 25vw;
                            height: 10vw;
                            background: linear-gradient(transparent,rgba(0,0,0,0.8));
                        }
                        
                        .related-score{
                            position: absolute;
                            left: 1vw;
                            bottom: 1vw;
                            color: #FFAF00;
                        }
                    }
                    .related-nm{
                        width: 25vw;
                        font-size: 14px;
                        color: #333333;
                        line-height: 7vw;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
            }
        }
        
        .more{
            color: #f03d38;
            font-size: 13px;
            text-align: center;
            line-height: 7vw;
            margin-bottom: 4vw;
        }
        
        .grey-line{
            width: 100%;
            height: 2vw;
            background-color: #f6f6f6;
        }

        .statement{
            width: 100vw;
            line-height: 20vw;
            color: #999999;
            font-size: 12px;
            text-align: center;
            background-color: #f4f4f4;

            span{
                color: #4e759e;
            }
        }
    }

    .bot{
        width: 100vw;
        height: 16vw;
    }
    
    .buy-btn-box{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100vw;
        height: 16vw;
        background-color: #ffffff;

        .buy-btn{
            width: 85vw;
            height: 12vw;
            line-height: 12vw;
            text-align: center;
            color: #ffffff;
            margin: 2vw auto;
            border-radius: 8vw;
            box-shadow: 0 0.06rem 0.12rem 0 rgba(251,51,51,.3);
            background-image: linear-gradient(-90deg,#fb3333,#ff5269);
        }
    }
}
</style>